<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  VideoCameraFilled,
  Search,
  Plus,
  VideoPlay,
  Edit,
  Delete,
  Picture,
  User,
  ChatDotRound,
  VideoCamera
} from '@element-plus/icons-vue'
import request from '@/utils/request'

// 响应式数据
const loading = ref(false)
const liveRooms = ref<any[]>([])
const channels = ref<any[]>([])
const videos = ref<any[]>([])
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)
const search = ref('')

// 对话框状态
const showCreateDialog = ref(false)
const showPresetsDialog = ref(false)
const saving = ref(false)
const editingRoom = ref<any>(null)
const currentRoom = ref<any>(null)

// 表单数据
const roomForm = ref({
  title: '',
  channelId: '',
  replayVideoId: '',
  coverUrl: '',
  manualViewerCount: 0,
  status: 'active'
})

// 预设消息数据
const presets = ref<any[]>([])

// API基础URL
const API_BASE_URL = (import.meta as any)?.env?.VITE_API_BASE_URL || ''

// 计算属性
const hasLiveRooms = computed(() => liveRooms.value.length > 0)
const isSearching = computed(() => search.value.trim().length > 0)
const canSave = computed(() => {
  return roomForm.value.title.trim() && roomForm.value.channelId
})

// 获取라이브 방 목록
const fetchLiveRooms = async () => {
  loading.value = true
  try {
    const params: any = {
      page: currentPage.value,
      limit: pageSize.value
    }
    if (search.value.trim()) {
      params.search = search.value.trim()
    }

    const response = await request.get('/api/admin/live-rooms', { params })
    liveRooms.value = response.data.liveRooms || []
    total.value = response.data.total || 0
  } catch (error) {
    console.error('라이브 방 목록 가져오기 실패:', error)
    ElMessage.error('라이브 방 목록을 가져오는데 실패했습니다')
  } finally {
    loading.value = false
  }
}

// 获取채널列表
const fetchChannels = async () => {
  try {
    const response = await request.get('/api/admin/channels', { params: { limit: 200 } })
    channels.value = response.data.channels || []
  } catch (error) {
    console.error('채널 목록 가져오기 실패:', error)
    ElMessage.error('채널 목록을 가져오는데 실패했습니다')
  }
}

// 获取비디오列表
const fetchVideos = async () => {
  try {
    const params: any = { limit: 200 }
    if (roomForm.value.channelId) {
      params.channelId = roomForm.value.channelId
    }
    const response = await request.get('/api/admin/videos', { params })
    videos.value = response.data.videos || []
  } catch (error) {
    console.error('비디오 목록 가져오기 실패:', error)
    ElMessage.error('비디오 목록을 가져오는데 실패했습니다')
  }
}

// 搜索处理
const handleSearch = () => {
  currentPage.value = 1
  fetchLiveRooms()
}

// 清空搜索
const clearSearch = () => {
  search.value = ''
  currentPage.value = 1
  fetchLiveRooms()
}

// 채널变化处理
const onChannelChange = async () => {
  roomForm.value.replayVideoId = ''
  await fetchVideos()
}

// 打开创建对话框
const openCreate = () => {
  editingRoom.value = null
  roomForm.value = {
    title: '',
    channelId: '',
    replayVideoId: '',
    coverUrl: '',
    manualViewerCount: 0,
    status: 'active'
  }
  showCreateDialog.value = true
}

// 打开编辑对话框
const openEdit = (room: any) => {
  editingRoom.value = room
  roomForm.value = {
    title: room.title || '',
    channelId: room.channelId,
    replayVideoId: room.replayVideoId || '',
    coverUrl: room.coverUrl || '',
    manualViewerCount: room.manualViewerCount || 0,
    status: room.status
  }
  showCreateDialog.value = true
  fetchVideos()
}

// 处理图片上传成功
const handleCoverSuccess = (res: any) => {
  if (res?.coverUrl) {
    roomForm.value.coverUrl = res.coverUrl
    ElMessage.success('커버 이미지 업로드 성공')
  }
}

// 处理图片上传失败
const handleCoverError = () => {
  ElMessage.error('커버 이미지 업로드 실패')
}

// 保存라이브 방
const save = async () => {
  if (!canSave.value) {
    ElMessage.error('제목과 채널을 입력해주세요')
    return
  }

  saving.value = true
  try {
    if (editingRoom.value) {
      await request.put(`/api/admin/live-rooms/${editingRoom.value.id}`, roomForm.value)
      ElMessage.success('라이브 방 수정 성공')
    } else {
      await request.post('/api/admin/live-rooms', roomForm.value)
      ElMessage.success('라이브 방 생성 성공')
    }
    showCreateDialog.value = false
    fetchLiveRooms()
  } catch (error) {
    console.error('라이브 방 저장 실패:', error)
    ElMessage.error(editingRoom.value ? '라이브 방 수정 실패' : '라이브 방 생성 실패')
  } finally {
    saving.value = false
  }
}

// 删除라이브 방
const deleteLiveRoom = async (room: any) => {
  try {
    await ElMessageBox.confirm(
      '이 라이브 방을 삭제하시겠습니까?',
      '삭제 확인',
      {
        confirmButtonText: '삭제',
        cancelButtonText: '취소',
        type: 'warning'
      }
    )

    room.deleting = true
    await request.delete(`/api/admin/live-rooms/${room.id}`)
    ElMessage.success('라이브 방 삭제 성공')
    fetchLiveRooms()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('라이브 방 삭제 실패:', error)
      ElMessage.error('라이브 방 삭제 실패')
    }
  } finally {
    room.deleting = false
  }
}

// 管理预设消息
const managePresets = async (room: any) => {
  currentRoom.value = room
  try {
    const response = await request.get(`/api/admin/live-rooms/${room.id}/presets`)
    presets.value = response.data.presets.map((p: any) => ({ ...p, editing: false }))
    showPresetsDialog.value = true
  } catch (error) {
    console.error('미리 설정된 메시지 가져오기 실패:', error)
    ElMessage.error('미리 설정된 메시지를 가져오는데 실패했습니다')
  }
}

// 添加预设消息
const addPreset = () => {
  presets.value.push({
    id: null,
    content: '새 메시지',
    sortOrder: presets.value.length,
    isActive: true,
    editing: true
  })
}

// 保存预设消息
const savePreset = async (preset: any) => {
  try {
    if (preset.id) {
      await request.put(`/api/admin/live-rooms/${currentRoom.value.id}/presets/${preset.id}`, {
        content: preset.content,
        sortOrder: preset.sortOrder,
        isActive: preset.isActive
      })
    } else {
      const response = await request.post(`/api/admin/live-rooms/${currentRoom.value.id}/presets`, {
        content: preset.content,
        sortOrder: preset.sortOrder
      })
      preset.id = response.data.id
    }
    preset.editing = false
    ElMessage.success('메시지 저장 성공')
  } catch (error) {
    console.error('메시지 저장 실패:', error)
    ElMessage.error('메시지 저장 실패')
  }
}

// 删除预设消息
const deletePreset = async (preset: any) => {
  try {
    await ElMessageBox.confirm(
      '이 메시지를 삭제하시겠습니까?',
      '삭제 확인',
      {
        confirmButtonText: '삭제',
        cancelButtonText: '취소',
        type: 'warning'
      }
    )

    if (preset.id) {
      await request.delete(`/api/admin/live-rooms/${currentRoom.value.id}/presets/${preset.id}`)
    }

    const index = presets.value.indexOf(preset)
    presets.value.splice(index, 1)
    ElMessage.success('메시지 삭제 성공')
  } catch (error) {
    if (error !== 'cancel') {
      console.error('메시지 삭제 실패:', error)
      ElMessage.error('메시지 삭제 실패')
    }
  }
}

// 页面变化处理
const handlePageChange = (page: number) => {
  currentPage.value = page
  fetchLiveRooms()
}

// 状态类型
const getStatusType = (status: string) => {
  switch (status) {
    case 'active': return 'success'
    case 'inactive': return 'info'
    default: return 'info'
  }
}

// 状态文本
const getStatusText = (status: string) => {
  switch (status) {
    case 'active': return '활성'
    case 'inactive': return '비활성'
    default: return '알 수 없음'
  }
}

// 格式化日期
const formatDate = (dateString: string) => {
  if (!dateString) return '-'
  return new Date(dateString).toLocaleString('ko-KR')
}

// 组件挂载时获取数据
onMounted(() => {
  fetchLiveRooms()
  fetchChannels()
})
</script>

<template>
  <div class="mobile-live-management">
    <!-- 搜索栏 -->
    <div class="mobile-search-section">
      <el-input
        v-model="search"
        placeholder="라이브 방 제목 검색"
        :prefix-icon="Search"
        clearable
        @keyup.enter="handleSearch"
        @clear="clearSearch"
      >
        <template #append>
          <el-button :icon="Search" @click="handleSearch" :loading="loading" />
        </template>
      </el-input>
    </div>

    <!-- 操作按钮 -->
    <div class="mobile-action-section">
      <el-button type="primary" :icon="Plus" @click="openCreate" size="large" style="width: 100%;">
        라이브 방 생성
      </el-button>
    </div>

    <!-- 라이브 방 列表 -->
    <div class="mobile-live-list" v-loading="loading">
      <!-- 空状态 -->
      <div v-if="!hasLiveRooms && !loading" class="mobile-empty">
        <el-icon class="mobile-empty-icon" size="48">
          <VideoCameraFilled />
        </el-icon>
        <div class="mobile-empty-text">
          {{ isSearching ? '검색 결과가 없습니다' : '라이브 방이 없습니다' }}
        </div>
        <el-button v-if="!isSearching" type="primary" :icon="Plus" @click="openCreate" style="margin-top: 16px;">
          첫 번째 라이브 방 생성
        </el-button>
      </div>

      <!-- 라이브 방 卡片列表 -->
      <div v-else class="live-cards">
        <div v-for="room in liveRooms" :key="room.id" class="mobile-live-card">
          <!-- 라이브 방 头部信息 -->
          <div class="live-header">
            <div class="live-cover">
              <img
                v-if="room.coverUrl"
                :src="`${API_BASE_URL}${room.coverUrl}`"
                alt="라이브 커버"
                class="cover-image"
              />
              <el-icon v-else class="cover-placeholder" size="32">
                <VideoPlay />
              </el-icon>
            </div>
            <div class="live-info">
              <div class="live-title">{{ room.title }}</div>
              <div class="live-channel">{{ room.channel?.name || '채널 없음' }}</div>
              <div class="live-meta">
                <el-tag :type="getStatusType(room.status)" size="small">
                  {{ getStatusText(room.status) }}
                </el-tag>
                <span class="live-viewers" v-if="room.manualViewerCount > 0">
                  시청자: {{ room.manualViewerCount.toLocaleString() }}명
                </span>
              </div>
            </div>
          </div>

          <!-- 라이브 방 详细信息 -->
          <div class="live-details">
            <div class="detail-item" v-if="room.replayVideo">
              <span class="detail-label">연결된 비디오:</span>
              <span class="detail-value">{{ room.replayVideo.title }}</span>
            </div>
            <div class="detail-item" v-if="room.presets?.length">
              <span class="detail-label">미리 설정된 메시지:</span>
              <span class="detail-value">{{ room.presets.length }}개</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">생성 시간:</span>
              <span class="detail-value">{{ formatDate(room.startedAt) }}</span>
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="live-actions">
            <el-button
              :icon="Edit"
              size="small"
              @click="openEdit(room)"
              :disabled="room.deleting"
            >
              편집
            </el-button>
            <el-button
              :icon="ChatDotRound"
              size="small"
              type="primary"
              @click="managePresets(room)"
              :disabled="room.deleting"
            >
              메시지
            </el-button>
            <el-button
              :icon="Delete"
              size="small"
              type="danger"
              @click="deleteLiveRoom(room)"
              :loading="room.deleting"
            >
              삭제
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div v-if="total > pageSize" class="mobile-pagination">
      <el-pagination
        v-model:current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="prev, pager, next"
        @current-change="handlePageChange"
        small
      />
    </div>

    <!-- 创建/编辑 라이브 방 对话框 -->
    <el-dialog
      v-model="showCreateDialog"
      :title="editingRoom ? '라이브 방 편집' : '라이브 방 생성'"
      width="95%"
      :close-on-click-modal="false"
      class="mobile-dialog"
    >
      <el-form :model="roomForm" label-position="top" class="mobile-form">
        <el-form-item label="라이브 방 제목" required>
          <el-input
            v-model="roomForm.title"
            placeholder="라이브 방 제목을 입력하세요"
            maxlength="100"
            show-word-limit
          />
        </el-form-item>

        <el-form-item label="채널 선택" required>
          <el-select
            v-model="roomForm.channelId"
            placeholder="채널을 선택하세요"
            style="width: 100%"
            @change="onChannelChange"
          >
            <el-option
              v-for="channel in channels"
              :key="channel.id"
              :label="channel.name"
              :value="channel.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="연결된 비디오 (선택사항)">
          <el-select
            v-model="roomForm.replayVideoId"
            placeholder="비디오를 선택하세요"
            style="width: 100%"
            clearable
            @visible-change="(visible: boolean) => { if(visible) fetchVideos() }"
          >
            <el-option
              v-for="video in videos"
              :key="video.id"
              :label="video.title"
              :value="video.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="커버 이미지">
          <div class="mobile-upload-section">
            <el-upload
              class="mobile-uploader"
              :action="`${API_BASE_URL}/api/admin/uploads/cover`"
              name="cover-upload"
              :with-credentials="true"
              :show-file-list="false"
              :on-success="handleCoverSuccess"
              :on-error="handleCoverError"
              accept="image/*"
            >
              <div class="upload-area">
                <img
                  v-if="roomForm.coverUrl"
                  :src="`${API_BASE_URL}${roomForm.coverUrl}`"
                  class="uploaded-image"
                  alt="업로드된 커버"
                />
                <div v-else class="upload-placeholder">
                  <el-icon size="32">
                    <Picture />
                  </el-icon>
                  <div class="upload-text">커버 이미지 선택</div>
                </div>
              </div>
            </el-upload>
            <div class="upload-tips">
              <p>• 권장 크기: 16:9 비율 (예: 1280x720px)</p>
              <p>• 지원 형식: JPG, PNG, GIF</p>
              <p>• 최대 크기: 5MB</p>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="수동 시청자 수">
          <el-input-number
            v-model="roomForm.manualViewerCount"
            :min="0"
            :max="999999999"
            placeholder="시청자 수를 입력하세요"
            style="width: 100%"
          />
        </el-form-item>

        <el-form-item label="상태" v-if="editingRoom">
          <el-select v-model="roomForm.status" style="width: 100%">
            <el-option label="활성" value="active" />
            <el-option label="비활성" value="inactive" />
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="mobile-dialog-footer">
          <el-button @click="showCreateDialog = false" size="large">취소</el-button>
          <el-button
            type="primary"
            @click="save"
            :loading="saving"
            :disabled="!canSave"
            size="large"
          >
            {{ editingRoom ? '수정' : '생성' }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 미리 설정된 메시지 관리 대화상자 -->
    <el-dialog
      v-model="showPresetsDialog"
      title="미리 설정된 메시지 관리"
      width="95%"
      class="mobile-dialog"
    >
      <div class="presets-header">
        <el-button type="primary" :icon="Plus" @click="addPreset" size="large" style="width: 100%;">
          메시지 추가
        </el-button>
      </div>

      <div class="mobile-presets-list">
        <div v-for="(preset, index) in presets" :key="preset.id || index" class="mobile-preset-card">
          <div class="preset-header">
            <span class="preset-order">{{ preset.sortOrder + 1 }}</span>
            <el-switch
              v-model="preset.isActive"
              @change="savePreset(preset)"
              active-text="활성"
              inactive-text="비활성"
            />
          </div>

          <div class="preset-content">
            <el-input
              v-if="preset.editing"
              v-model="preset.content"
              type="textarea"
              :rows="3"
              placeholder="메시지 내용을 입력하세요"
              @blur="savePreset(preset)"
              @keyup.ctrl.enter="savePreset(preset)"
            />
            <div v-else class="preset-text">{{ preset.content }}</div>
          </div>

          <div class="preset-actions">
            <el-button
              v-if="!preset.editing"
              :icon="Edit"
              size="small"
              @click="preset.editing = true"
            >
              편집
            </el-button>
            <el-button
              v-else
              size="small"
              type="primary"
              @click="savePreset(preset)"
            >
              저장
            </el-button>
            <el-button
              :icon="Delete"
              size="small"
              type="danger"
              @click="deletePreset(preset)"
            >
              삭제
            </el-button>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-if="presets.length === 0" class="mobile-empty">
          <el-icon class="mobile-empty-icon" size="48">
            <ChatDotRound />
          </el-icon>
          <div class="mobile-empty-text">미리 설정된 메시지가 없습니다</div>
          <el-button type="primary" :icon="Plus" @click="addPreset" style="margin-top: 16px;">
            첫 번째 메시지 추가
          </el-button>
        </div>
      </div>

      <template #footer>
        <div class="mobile-dialog-footer">
          <el-button @click="showPresetsDialog = false" size="large" style="width: 100%;">
            완료
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
/* 移动端라이브 관리主容器 */
.mobile-live-management {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

/* 搜索区域 */
.mobile-search-section {
  background: var(--el-bg-color);
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* 操作按钮区域 */
.mobile-action-section {
  padding: 0 16px;
}

/* 라이브 방 列表容器 */
.mobile-live-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 空状态 */
.mobile-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--el-text-color-placeholder);
  text-align: center;
}

.mobile-empty-icon {
  color: var(--el-color-info);
  margin-bottom: 16px;
}

.mobile-empty-text {
  font-size: 16px;
  margin-bottom: 8px;
}

/* 라이브 방 卡片容器 */
.live-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px;
}

/* 移动端라이브 방 卡片 */
.mobile-live-card {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.mobile-live-card:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* 라이브 방 头部信息 */
.live-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.live-cover {
  width: 80px;
  height: 45px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--el-fill-color-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover-placeholder {
  color: var(--el-text-color-placeholder);
}

.live-info {
  flex: 1;
  min-width: 0;
}

.live-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin-bottom: 4px;
  word-break: break-word;
  line-height: 1.4;
}

.live-channel {
  font-size: 14px;
  color: var(--el-text-color-regular);
  margin-bottom: 8px;
}

.live-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.live-viewers {
  font-size: 12px;
  color: var(--el-color-success);
  font-weight: 500;
}

/* 라이브 방 详细信息 */
.live-details {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--el-fill-color-extra-light);
  border-radius: 8px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  font-size: 14px;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-label {
  color: var(--el-text-color-regular);
  font-weight: 500;
  flex-shrink: 0;
  margin-right: 8px;
}

.detail-value {
  color: var(--el-text-color-primary);
  text-align: right;
  word-break: break-word;
}

/* 라이브 방 操作按钮 */
.live-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.live-actions .el-button {
  min-width: 60px;
}

/* 分页 */
.mobile-pagination {
  display: flex;
  justify-content: center;
  padding: 16px;
  background: var(--el-bg-color);
  border-radius: 12px;
  margin: 0 16px;
}

/* 移动端对话框样式 */
.mobile-dialog {
  margin: 5vh auto;
}

.mobile-form {
  padding: 0;
}

.mobile-form .el-form-item {
  margin-bottom: 20px;
}

.mobile-form .el-form-item__label {
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin-bottom: 8px;
}

/* 移动端上传组件 */
.mobile-upload-section {
  width: 100%;
}

.mobile-uploader {
  width: 100%;
}

.upload-area {
  width: 160px;
  height: 90px;
  border: 2px dashed var(--el-border-color);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

.upload-area:hover {
  border-color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}

.uploaded-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--el-text-color-placeholder);
}

.upload-text {
  font-size: 14px;
}

.upload-tips {
  margin-top: 12px;
  font-size: 12px;
  color: var(--el-text-color-placeholder);
  line-height: 1.5;
}

.upload-tips p {
  margin: 0;
}

/* 移动端对话框底部 */
.mobile-dialog-footer {
  display: flex;
  gap: 12px;
  padding: 16px 0 0 0;
}

.mobile-dialog-footer .el-button {
  flex: 1;
}

/* 预设消息管理样式 */
.presets-header {
  margin-bottom: 16px;
}

.mobile-presets-list {
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-preset-card {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.preset-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.preset-order {
  background: var(--el-color-primary);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.preset-content {
  margin-bottom: 12px;
}

.preset-text {
  font-size: 14px;
  color: var(--el-text-color-primary);
  line-height: 1.5;
  word-break: break-word;
  padding: 8px 12px;
  background: var(--el-fill-color-extra-light);
  border-radius: 8px;
}

.preset-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.preset-actions .el-button {
  min-width: 60px;
}

/* 暗黑模式适配 */
:root.dark .mobile-live-card {
  background: var(--el-bg-color);
  border-color: var(--el-border-color);
}

:root.dark .mobile-preset-card {
  background: var(--el-bg-color);
  border-color: var(--el-border-color);
}

:root.dark .upload-area {
  border-color: var(--el-border-color);
}

:root.dark .upload-area:hover {
  border-color: var(--el-color-primary);
  background: var(--el-color-primary-dark-2);
}

:root.dark .live-details {
  background: var(--el-fill-color-darker);
}

:root.dark .preset-text {
  background: var(--el-fill-color-darker);
}
</style>
